<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>@yield('title', 'The LaLiT Hotels')</title>

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.bunny.net">
  <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

  <!-- Scripts -->
  @vite(['resources/css/app.css', 'resources/js/app.js'])
  <!-- Bootstrap 5 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

  <!-- Optional Animate.css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}" />
  <style>
    /* Mobile Offcanvas Menu Styles */
    .offcanvas {
      width: 300px !important;
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    }

    .offcanvas-header {
      background-color: #c6aa76;
      color: white;
      padding: 1.5rem;
      border-bottom: 3px solid #b39968;
    }

    .offcanvas-title {
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: white;
    }

    .offcanvas .btn-close {
      filter: brightness(0) invert(1);
      opacity: 1;
    }

    .offcanvas-body {
      padding: 1.5rem 1rem;
    }

    /* Mobile Navigation Links */
    .mobile-nav-link {
      color: #212322 !important;
      font-weight: 500;
      font-size: 1rem;
      padding: 0.875rem 1.25rem !important;
      margin-bottom: 0.5rem;
      border-radius: 8px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      background-color: transparent;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link:focus {
      color: #c6aa76 !important;
      background-color: rgba(198, 170, 118, 0.1);
      transform: translateX(5px);
    }

    .mobile-nav-link::before {
      content: "▸";
      margin-right: 0.75rem;
      color: #c6aa76;
      font-size: 1.1rem;
      transition: transform 0.3s ease;
    }

    .mobile-nav-link:hover::before {
      transform: translateX(3px);
    }

    /* Mobile Menu Footer */
    #offcanvasFooter {
      border-top: 2px solid #e9ecef !important;
      padding-top: 1.5rem !important;
      margin-top: 1.5rem !important;
    }

    #offcanvasFooter .ct-btn {
      padding: 0.875rem 1.25rem;
      font-weight: 700;
      border-radius: 10px;
      transition: all 0.3s ease;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 1px;
      border: none;
      background: linear-gradient(135deg, #212322 0%, #000000 100%);
      color: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      text-decoration: none;
      display: block;
      position: relative;
      overflow: hidden;
    }

    #offcanvasFooter .ct-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #c6aa76 0%, #b39968 100%);
      transition: left 0.4s ease;
      z-index: 0;
    }

    #offcanvasFooter .ct-btn:hover::before {
      left: 0;
    }

    #offcanvasFooter .ct-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(198, 170, 118, 0.4);
    }

    #offcanvasFooter .ct-btn span,
    #offcanvasFooter .ct-btn:not(:has(span)) {
      position: relative;
      z-index: 1;
    }

    /* Special styling for Book Your Stay button */
    #offcanvasFooter .ct-btn:last-child {
      background: linear-gradient(135deg, #c6aa76 0%, #b39968 100%);
    }

    #offcanvasFooter .ct-btn:last-child::before {
      background: linear-gradient(135deg, #212322 0%, #000000 100%);
    }

    #offcanvasFooter .gap-2 {
      gap: 0.75rem !important;
    }

    /* Sticky Navigation Styles */
    #sticky-page-nav {
      transition: all 0.3s ease;
      z-index: 1020;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    #sticky-page-nav .container-fluid {
      background-color: rgba(255, 255, 255, 0.97) !important;
      backdrop-filter: blur(10px);
    }

    #sticky-page-nav .sticky-logo img {
      transition: all 0.3s ease;
    }

    #sticky-page-nav .secondary-navigation .nav-link {
      color: #444;
      font-size: 0.9rem;
      font-weight: 500;
      padding: 0.5rem 1rem;
      transition: all 0.2s ease;
      margin: 0 0.2rem;
    }

    #sticky-page-nav .secondary-navigation .nav-link:hover {
      color: #c6aa76;
    }

    #sticky-page-nav .secondary-navigation .nav-link.active {
      color: #c6aa76;
      font-weight: 600;
      background-color: transparent;
    }

    #sticky-page-nav .btn-primary {
      background-color: #c6aa76;
      border-color: #c6aa76;
      padding: 0.375rem 1rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      transition: all 0.3s ease;
    }

    #sticky-page-nav .btn-primary:hover {
      background-color: #b09762;
      border-color: #b09762;
      transform: translateY(-2px);
    }

    @media (max-width: 991px) {
      #sticky-page-nav .secondary-navigation {
        display: none !important;
      }

      #sticky-page-nav .nav-action {
        margin-left: auto;
      }
    }

    @media (max-width: 768px) {
      #sticky-page-nav .sticky-logo img {
        height: 32px;
      }
    }

    /* Login Modal Tab Styles */
    .login-tab-btn {
      background-color: transparent !important;
      border: 2px solid #e5e5e5 !important;
      color: #666 !important;
      font-weight: 500;
      padding: 0.75rem 1rem;
      border-radius: 8px;
      transition: all 0.3s ease;
      margin: 0 0.25rem;
      white-space: nowrap;
      text-align: center;
    }

    /* Ensure tabs stay in same row */
    #loginTabs {
      display: flex !important;
      flex-wrap: nowrap;
      gap: 0.5rem;
    }

    #loginTabs .nav-link {
      flex: 1;
      min-width: 0;
    }

    .login-tab-btn:hover {
      background-color: #f8f9fa !important;
      border-color: #c6aa76 !important;
      color: #c6aa76 !important;
    }

    .login-tab-btn.active {
      background-color: #c6aa76 !important;
      border-color: #c6aa76 !important;
      color: white !important;
      font-weight: 600;
    }

    .login-tab-btn.active:hover {
      background-color: #b09762 !important;
      border-color: #b09762 !important;
      color: white !important;
    }

    /* Tab content transitions */
    .tab-pane {
      transition: all 0.3s ease-in-out;
    }

    /* Send OTP Button */
    #sendOtpBtn:hover {
      text-decoration: underline !important;
    }

    #sendOtpBtn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* Mobile responsive for login tabs */
    @media (max-width: 576px) {
      .login-tab-btn {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
      }

      .login-tab-btn i {
        display: none;
      }

      #offcanvasFooter .ct-btn {
        height: auto;
      }
    }
  </style>

  @stack('styles')
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-GTG6Q4XPMZ"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-GTG6Q4XPMZ');
  </script>
</head>

<body class="body-layout font-sans antialiased bg-gray-50 dark:bg-gray-900">
  <header>
    <!-- Primary Navigation Header -->
    <div class="carousel-nav-menu px-3">
      <div class="d-flex justify-content-between align-items-center py-2">
        <!-- Left Side - Toggle Button for Mobile / Empty space for Desktop -->
        <div class="nav-left">
          <button class="btn d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu">
            ☰
          </button>
          <!-- Empty space for desktop to balance layout -->
          <div class="d-none d-lg-block" style="width: 200px;"></div>
        </div>

        <!-- Center Logo -->
        <div class="logo">
          <a href="/">
            <img src="{{ asset('assets/images/logo-black-lalit.png') }}" alt="Logo" class="img-fluid">
          </a>
        </div>

        <!-- Right Side - Desktop Menu / Mobile Login -->
        <div class="nav-right">
          <!-- Desktop Menu -->
          <ul class="nav nav-pills d-none d-lg-flex" id="desktopNavMenu">
            <li class="nav-item" id="loginNavItem">
              <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#loginModal">
                Login
              </a>
            </li>
            <li class="nav-item d-none" id="dashboardNavItem">
              <a href="{{ route('membership.dashboard') }}" class="nav-link">
                Dashboard
              </a>
            </li>
            <li class="nav-item d-none" id="logoutNavItem">
              <a href="#" class="nav-link" id="logoutBtn">
                Logout
              </a>
            </li>
            <li class="nav-item"><a class="nav-link" href="https://www.thelalit.com/">Book your stay</a>
            </li>
            <li class="nav-item" id="joinNowNavItem"><a class="nav-link" href="#" data-bs-toggle="modal"
                data-bs-target="#signupModal">Sign Up</a></li>
          </ul>

          <!-- Login/Logout Button for Mobile (visible only on mobile) -->
          <div class="d-lg-none" id="mobileNavActions">
            <a href="#" class="btn btn-sm" data-bs-toggle="modal" data-bs-target="#loginModal" id="mobileLoginBtn">
              Login
            </a>
            <div class="d-none" id="mobileDashboardActions">
              <a href="{{ route('membership.dashboard') }}" class="btn btn-outline-dark btn-sm me-2"
                id="mobileDashboardBtn">
                Dashboard
              </a>
              <a href="#" class="btn btn-outline-dark btn-sm" id="mobileLogoutBtn">
                Logout
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Secondary Navigation Header -->
      <div class="secondary-nav" style="height: 2.5rem;">
        <div class="container-fluid px-3">
          <div class="d-flex justify-content-center align-items-center h-100">
            <!-- Secondary Navigation Links -->
            <ul class="nav nav-pills secondary-nav-links">
              <li class="nav-item"><a class="nav-link" href="{{url('/')}}">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="{{url('/about-us')}}">About</a></li>
              <li class="nav-item"><a class="nav-link" href="{{url('/')}}#membership-tier">Membership
                  Tiers</a></li>
              <li class="nav-item"><a class="nav-link" href="{{url('/')}}#rewards">Rewards</a></li>
              <li class="nav-item"><a class="nav-link" href="{{url('/offers-detail')}}">Offers</a></li>
              <li class="nav-item"><a class="nav-link" href="{{url('/contact-us')}}">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Mobile Offcanvas Menu -->
    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasMenu">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title">The LaLiT Loyalty</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body d-flex flex-column">
        <nav>
          <ul class="nav flex-column">
            <li class="nav-item"><a class="nav-link mobile-nav-link" href="{{url('/')}}">Home</a></li>
            <li class="nav-item"><a class="nav-link mobile-nav-link" href="{{url('/about-us')}}">About</a></li>
            <li class="nav-item"><a class="nav-link mobile-nav-link" href="{{url('/')}}#membership-tier">Membership
                Tiers</a></li>
            <li class="nav-item"><a class="nav-link mobile-nav-link" href="{{url('/')}}#rewards">Rewards</a></li>
            <li class="nav-item"><a class="nav-link mobile-nav-link" href="{{url('/offers-detail')}}">Offers</a></li>
            <li class="nav-item"><a class="nav-link mobile-nav-link" href="{{url('/contact-us')}}">Contact</a></li>
          </ul>
        </nav>
        <!-- Mobile Menu Footer -->
        <div class="mt-auto" id="offcanvasFooter">
          <div class="d-flex flex-column gap-2">
            <a href="#" class="ct-btn text-center" data-bs-toggle="modal" data-bs-target="#loginModal"
              data-bs-dismiss="offcanvas" id="offcanvasLoginBtn"><i class="fas fa-sign-in-alt me-2"></i>Login</a>
            <a href="{{route('membership.dashboard')}}" class="ct-btn text-center d-none" data-bs-dismiss="offcanvas"
              id="offcanvasDashboardBtn"><i class="fas fa-tachometer-alt me-2"></i>Dashboard</a>
            <a href="#" class="ct-btn text-center d-none" id="offcanvasLogoutBtn"><i
                class="fas fa-sign-out-alt me-2"></i>Logout</a>
            <a href="#" class="ct-btn text-center" data-bs-toggle="modal" data-bs-target="#signupModal"
              data-bs-dismiss="offcanvas" id="offcanvasJoinBtn"><i class="fas fa-user-plus me-2"></i>Sign Up</a>
            <a href="https://www.thelalit.com/" target="_blank" class="ct-btn text-center"><i
                class="fas fa-hotel me-2"></i>Book Your Stay</a>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div id="sticky-page-nav" class="sticky-top d-none">
    <div class="container-fluid py-2 bg-white border-bottom shadow-sm">
      <div class="container">
        <!-- Main Navigation Row -->
        <div class="d-flex justify-content-between align-items-center">
          <!-- Logo instead of page title -->
          <div class="sticky-logo">
            <a href="{{ route('homestatic') }}">
              <img src="{{ asset('assets/images/logo-black-lalit.png') }}" alt="Logo" class="img-fluid"
                style="height: 40px;">
            </a>
          </div>

          <!-- Secondary Navigation Links -->
          <nav class="secondary-navigation d-none d-lg-block">
            <ul class="nav nav-pills secondary-nav-links">
              <li class="nav-item"><a class="nav-link" href="{{url('/')}}">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="{{url('/about-us')}}">About</a></li>
              <li class="nav-item"><a class="nav-link" href="{{url('/')}}#membership-tier">Membership
                  Tiers</a></li>
              <li class="nav-item"><a class="nav-link" href="{{url('/')}}#rewards">Rewards</a></li>
              <li class="nav-item"><a class="nav-link" href="{{url('/offers-detail')}}">Offers</a></li>
              <li class="nav-item"><a class="nav-link" href="{{url('/contact-us')}}">Contact</a></li>
            </ul>
          </nav>

          <div class="nav-action">
            <a href="#" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#signupModal"
              data-bs-dismiss="offcanvas">Sign Up</a>
          </div>
        </div>


      </div>
    </div>
  </div>
  @hasSection('hero')
    @yield('hero')
  @endif
  <!-- Sticky Page Navigation -->

  <!-- Page Title Section - Will be shown on mobile views -->
  @hasSection('page_title')
    <div class="page-title-container d-md-none bg-white py-3">
      <div class="container">
        <h1 class="page-title">@yield('page_title')</h1>
      </div>
    </div>
  @endif

  <!-- Main Content -->
  <main>
    @yield('content')
  </main>

  <!-- Footer -->
  <footer class="py-3" style="background-color: #f5f0eb;">
    <div class="container">
      <div class="row">
        <!-- Links Sections -->
        <div class="col-lg-8">
          <div class="row">
            <!-- First Column -->
            <div class="col-md-6">
              <h5 class="mb-3" style="color: #212322;">Quick Links</h5>
              <ul class="list-unstyled">
                <li class="mb-2"><a href="/about-us" class="text-decoration-none"
                    style="color: #212322; opacity: 0.7;">About The LaLiT Loyalty</a></li>
                <li class="mb-2"><a href="/contact-us" class="text-decoration-none"
                    style="color: #212322; opacity: 0.7;">Contact Us</a></li>
                <li class="mb-2"><a href="/faqs" class="text-decoration-none"
                    style="color: #212322; opacity: 0.7;">FAQs</a></li>
              </ul>
            </div>

            <!-- Second Column -->
            <div class="col-md-6 mb-4">
              <ul class="list-unstyled">
                <li class="mb-2"><a href="/terms-condition" class="text-decoration-none"
                    style="color: #212322; opacity: 0.7;">Terms & Conditions</a></li>
                <li class="mb-2"><a href="/privacy-policy" class="text-decoration-none"
                    style="color: #212322; opacity: 0.7;">Privacy Policy</a></li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Social Media Section -->
        {{-- <div class="col-lg-4 mb-4">
          <h5 class="mb-3" style="color: #212322;">Let's stay in touch</h5>
          <div class="connect-newsletter-cta">
            <a href="/newsletter-sign-up" class="btn btn-lg px-2 py-1"
              style="background-color: #000; color: #fff; border-color: #000;">
              Newsletter sign-up
            </a>
          </div>

          <p class="mb-4" style="color: #212322; opacity: 0.7;">Follow us on social media for the latest
            updates and exclusive offers.</p>
          <div class="d-flex gap-3">
            <a href="#" class="social-link" style="color: #212322; opacity: 0.7;">
              <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                <path
                  d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
              </svg>
            </a>
            <a href="#" class="social-link" style="color: #212322; opacity: 0.7;">
              <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                <path
                  d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z" />
              </svg>
            </a>
            <a href="#" class="social-link" style="color: #212322; opacity: 0.7;">
              <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                <path
                  d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.748-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z" />
              </svg>
            </a>
            <a href="#" class="social-link" style="color: #212322; opacity: 0.7;">
              <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                <path
                  d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
              </svg>
            </a>
            <a href="#" class="social-link" style="color: #212322; opacity: 0.7;">
              <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                <path
                  d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
              </svg>
            </a>
          </div>
        </div> --}}
      </div>

      <!-- Copyright Section -->
      <hr class="my-3 border-secondary">
      <div class="row align-items-center">
        <div class="col-md-6">
          <p class="mb-0" style="color: #212322; opacity: 0.7;">&copy; {{ date('Y') }} The LaLiT Hotels. All
            rights reserved.</p>
        </div>
        <div class="col-md-6 text-md-end">
          <img src="{{ asset('assets/images/logo-black-lalit.png') }}" alt="Logo" class="img-fluid"
            style="max-height: 100px;">
        </div>
      </div>
    </div>
  </footer>

  <!-- Login Modal -->
  <div class="modal fade lalit-login-modal" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header border-0 relative bg-gradient-to-br p-8 pb-4">
          <button type="button" class="btn-close absolute top-4 right-4" data-bs-dismiss="modal"
            aria-label="Close"></button>
          <div class="w-full text-center">
            <h4 class="text-2xl font-bold mb-1 text-slate-700">Log in to your</h4>
            <h5 class="text-lg font-normal text-gray-500 mb-0">The Lalit Loyalty Account</h5>
          </div>
        </div>

        <div class="modal-body px-6 py-6 flex-grow">
          <!-- Error Display Area -->
          <div id="loginErrorAlert" class="alert alert-danger d-none mb-4" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <span id="loginErrorMessage">Incorrect login details. Please try again.</span>
          </div>

          <!-- Loading Overlay -->
          <div id="loginLoadingOverlay" class="position-absolute top-0 start-0 w-100 h-100 d-none"
            style="background: rgba(255,255,255,0.9); z-index: 10; border-radius: 0 0 12px 12px;">
            <div class="d-flex align-items-center justify-content-center h-100">
              <div class="text-center">
                <div class="spinner-border text-primary mb-2" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
                <div class="text-muted">Logging in...</div>
              </div>
            </div>
          </div>

          <!-- Login Method Tabs -->
          <div class="mb-6">
            <div class="nav nav-pills d-flex" id="loginTabs" role="tablist">
              <button class="nav-link active login-tab-btn flex-fill" id="mobile-tab" data-bs-toggle="pill"
                data-bs-target="#mobile-login" type="button" role="tab" aria-controls="mobile-login"
                aria-selected="true">
                <i class="fas fa-mobile-alt me-2"></i>Login by Mobile
              </button>
              <button class="nav-link login-tab-btn flex-fill" id="member-tab" data-bs-toggle="pill"
                data-bs-target="#member-login" type="button" role="tab" aria-controls="member-login"
                aria-selected="false">
                <i class="fas fa-id-card me-2"></i>Login by Member ID
              </button>
            </div>
          </div>

          <form id="loginForm" action="{{ route('membership.login') }}" method="POST">
            @csrf

            <!-- Hidden field to track login method -->
            <input type="hidden" id="login_method" name="login_method" value="mobile">

            <!-- Tab Content -->
            <div class="tab-content" id="loginTabContent">
              <!-- Mobile Login Tab -->
              <div class="tab-pane fade show active" id="mobile-login" role="tabpanel" aria-labelledby="mobile-tab">

                <!-- Mobile Number Field -->
                <div class="mb-8">
                  <div class="row">
                    <!-- Country Code Field -->
                    <div class="col-4">
                      <label for="country_code_login"
                        class="block text-sm font-medium mb-3 text-orange-600">Country</label>
                      <select
                        class="form-select lalit-input w-full text-base bg-transparent border-0 border-b border-orange-400 rounded-none px-0 py-2 focus:outline-none focus:border-orange-500 focus:ring-0"
                        id="country_code_login" name="country_code" disabled>
                        <option value="+91" selected>+91</option>
                      </select>
                    </div>
                    <!-- Mobile Number Field -->
                    <div class="col-8">
                      <label for="mobile_number" class="block text-sm font-medium mb-3 text-orange-600">Mobile
                        Number</label>
                      <input type="tel"
                        class="lalit-input w-full text-base bg-transparent border-0 border-b border-orange-400 rounded-none px-0 py-2 focus:outline-none focus:border-orange-500 focus:ring-0"
                        id="mobile_number" name="mobile_number" value="" placeholder="Enter your mobile number"
                        maxlength="10">
                    </div>
                  </div>
                </div>

                <!-- OTP Field -->
                <div class="mb-6 relative">
                  <div class="d-flex justify-content-between align-items-center mb-3">
                    <label for="otp" class="block text-sm font-medium text-orange-600">OTP</label>
                    <button type="button" id="sendOtpBtn"
                      class="btn btn-sm text-orange-500 p-0 border-0 bg-transparent text-decoration-none hover:text-orange-600"
                      style="font-size: 0.875rem;">
                      <i class="fas fa-paper-plane me-1"></i>Send OTP
                    </button>
                  </div>
                  <input type="text"
                    class="lalit-input w-full text-base bg-transparent border-0 border-b border-orange-400 rounded-none px-0 py-2 focus:outline-none focus:border-orange-500 focus:ring-0"
                    id="otp" name="otp" value="" placeholder="Enter OTP" maxlength="6">
                </div>
              </div>

              <!-- Member ID Login Tab -->
              <div class="tab-pane fade" id="member-login" role="tabpanel" aria-labelledby="member-tab">

                <!-- Membership Number Field -->
                <div class="mb-8">
                  <label for="membership_number" class="block text-sm font-medium mb-3 text-orange-600">Membership
                    Number</label>
                  <input type="text"
                    class="lalit-input w-full text-base bg-transparent border-0 border-b border-orange-400 rounded-none px-0 py-2 focus:outline-none focus:border-orange-500 focus:ring-0"
                    id="membership_number" name="membership_number" value="" placeholder="Enter Membership number">
                </div>

                <!-- Password Field -->
                <div class="mb-6 relative">
                  <label for="loginPassword" class="block text-sm font-medium mb-3 text-orange-600">Password</label>
                  <div class="relative">
                    <input type="password"
                      class="lalit-input w-full text-base bg-transparent border-0 border-b border-orange-400 rounded-none px-0 py-2 pr-8 focus:outline-none focus:border-orange-500 focus:ring-0"
                      id="loginPassword" name="password" value="" placeholder="Enter Password">
                    <button class="absolute right-0 top-2 p-1 border-0 bg-transparent text-gray-500 hover:text-gray-700"
                      type="button" id="togglePassword">
                      <i class="fas fa-eye text-sm"></i>
                    </button>
                  </div>
                </div>

                <!-- Forgot Password Link -->
                <div class="mb-6 text-left">
                  <a href="#" class="text-orange-500 text-sm no-underline hover:text-orange-600"
                    id="forgotPasswordLink">Forgot Password</a>
                </div>
              </div>
            </div>

            <!-- Login Button -->
            <div class="mb-4">
              <button type="submit" class="w-full btn-lg ct-btn" id="loginSubmitBtn">
                <span class="login-btn-text">LOG IN</span>
                <span class="login-btn-loading d-none">
                  <i class="fas fa-spinner fa-spin me-2"></i>Logging in...
                </span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Signup Modal -->
  <div class="modal fade lalit-login-modal" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header border-0 relative bg-gradient-to-br p-8 pb-4">
          <button type="button" class="btn-close absolute top-4 right-4" data-bs-dismiss="modal"
            aria-label="Close"></button>
          <div class="w-full text-center">
            <h4 class="text-2xl font-bold mb-1 text-slate-700">Join</h4>
            <h5 class="text-lg font-normal text-gray-500 mb-0">The Lalit Loyalty</h5>
            <p>for a world of exclusive previleges. Program open to only Indian Residents</p>
          </div>
        </div>

        <div class="modal-body px-6 py-6 flex-grow">
          <!-- Error Display Area -->
          <div id="signupErrorAlert" class="alert alert-danger d-none mb-4" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <span id="signupErrorMessage">Please fix the errors below.</span>
          </div>

          <!-- Success Display Area -->
          <div id="signupSuccessAlert" class="alert alert-success d-none mb-4" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            <span id="signupSuccessMessage">Registration successful! Please check your email.</span>
          </div>

          <!-- Loading Overlay -->
          <div id="signupLoadingOverlay" class="position-absolute top-0 start-0 w-100 h-100 d-none"
            style="background: rgba(255,255,255,0.9); z-index: 10; border-radius: 0 0 12px 12px;">
            <div class="d-flex align-items-center justify-content-center h-100">
              <div class="text-center">
                <div class="spinner-border text-primary mb-2" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
                <div class="text-muted">Creating your account...</div>
              </div>
            </div>
          </div>

          <form id="signupForm" action="{{ route('membership.register') }}" method="POST">
            @csrf

            <!-- Step 1: Basic Information -->
            <div id="signupStep1">
              <!-- First Name Field -->
              <div class="mb-4">
                <label for="first_name" class="block text-sm font-medium mb-2 text-orange-600">First Name
                  <span class="text-red-500">*</span></label>
                <input type="text"
                  class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                  id="first_name" name="first_name" placeholder="Enter your first name as per govt. Id" required>
                <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
              </div>

              <!-- Last Name Field -->
              <div class="mb-4">
                <label for="last_name" class="block text-sm font-medium mb-2 text-orange-600">Last Name
                  <span class="text-red-500">*</span></label>
                <input type="text"
                  class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                  id="last_name" name="last_name" placeholder="Enter your last name as per govt. Id" required>
                <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
              </div>

              <!-- Email Field -->
              <div class="mb-4">
                <label for="email" class="block text-sm font-medium mb-2 text-orange-600">Email <span
                    class="text-red-500">*</span></label>
                <input type="email"
                  class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                  id="email" name="email" placeholder="Enter your valid email address" required>
                <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
                <div id="emailOtpSuccess" class="text-green-600 text-sm mt-1 d-none"></div>
                <div class="text-end">
                  <button type="button" class="btn btn-outline-orange px-4 py-2 mt-2" id="sendEmailOtpBtn" style="border-color: #f97316; color: #f97316;">
                    <span class="send-otp-text">SEND OTP</span>
                    <span class="send-otp-loading d-none">
                      <i class="fas fa-spinner fa-spin"></i>
                    </span>
                  </button>
                </div>
              </div>

              <!-- Email OTP Field (Hidden initially) -->
              <div class="mb-4 d-none" id="emailOtpField">
                <label for="email_otp" class="block text-sm font-medium mb-2 text-orange-600">Enter OTP <span
                    class="text-red-500">*</span></label>
                <input type="text"
                  class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                  id="email_otp" name="email_otp" placeholder="Enter 6-digit OTP sent to your email" 
                  maxlength="6" pattern="[0-9]{6}">
                <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
                <div id="emailOtpError" class="text-red-500 text-sm mt-1 d-none"></div>
                <div id="emailOtpVerified" class="text-green-600 text-sm mt-1 d-none">
                  <i class="fas fa-check-circle me-1"></i>Email verified successfully!
                </div>
                <small class="text-gray-500 text-xs">OTP is valid for 10 minutes</small>
              </div>

              <!-- Mobile Field -->
              <div class="mb-4">
                <div class="row">
                  <!-- Country Code Field -->
                  <div class="col-4">
                    <label for="country_code_signup" class="block text-sm font-medium mb-2 text-orange-600">Country
                      <span class="text-red-500">*</span></label>
                    <select
                      class="form-select w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                      id="country_code_signup" name="country_code" disabled required>
                      <option value="+91" selected>+91</option>
                    </select>
                  </div>
                  <!-- Mobile Number Field -->
                  <div class="col-8">
                    <label for="mobile" class="block text-sm font-medium mb-2 text-orange-600">Mobile
                      Number <span class="text-red-500">*</span></label>
                    <input type="tel"
                      class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                      id="mobile" name="mobile" placeholder="Enter your mobile number" pattern="[0-9]{10}"
                      maxlength="10" required>
                    <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
                    <small class="text-gray-500 text-xs">10-digit mobile number</small>
                  </div>
                </div>
              </div>

              <!-- Terms and Conditions Checkbox -->
              <div class="mb-4">
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="terms_accepted" name="terms_accepted" required>
                  <label class="form-check-label text-sm text-gray-700 lh-base" for="terms_accepted">
                    By joining, I agree to The Lalit Loyalty
                    <a href="/terms-condition" target="_blank"
                      class="text-orange-500 hover:text-orange-600 text-decoration-underline">Terms
                      and Conditions.</a> <span class="text-red-500">*</span>
                  </label>
                  <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
                </div>
              </div>

              <!-- Continue Button -->
              <div class="mb-4">
                <button type="button" class="w-full btn-lg ct-btn" id="signupContinueBtn" disabled>
                  <span class="signup-continue-text">CONTINUE</span>
                  <span class="signup-continue-loading d-none">
                    <i class="fas fa-spinner fa-spin me-2"></i>Creating account...
                  </span>
                </button>
                <small class="text-gray-500 text-xs d-block mt-2 text-center">
                  <i class="fas fa-info-circle me-1"></i>Please verify your email to continue
                </small>
              </div>
            </div>

            <!-- Step 2: OTP and Password Setup (Hidden initially) -->
            <div id="signupStep2" class="d-none">
              <input type="hidden" id="member_id" name="member_id">
              <input type="hidden" id="member_email" name="member_email">

              <!-- Back Button -->
              <div class="mb-4">
                <button type="button" class="btn btn-outline-secondary" id="signupBackBtn">
                  <i class="fas fa-arrow-left me-2"></i>BACK
                </button>
              </div>

              <!-- Info Message -->
              <div class="alert alert-info mb-4">
                <i class="fas fa-info-circle me-2"></i>
                <span>We've sent an OTP to your mobile number. OTP is valid for 5 minutes. Please enter it below along with your desired
                  password.</span>
              </div>

              <!-- OTP Field -->
              <div class="mb-4">
                <label for="signup_otp" class="block text-sm font-medium mb-2 text-orange-600">Enter OTP
                  <span class="text-red-500">*</span></label>
                <input type="text"
                  class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                  id="signup_otp" name="otp" placeholder="Enter 6-digit OTP" maxlength="6" pattern="[0-9]{6}">
                <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
              </div>

            <!--Resend OTP Again-->
            <div class="text-end">
              <button type="button" id="resendOtpResetBtn"
                class="btn btn-sm text-orange-500 p-0 border-0 bg-transparent text-decoration-none hover:text-orange-600"
                style="font-size: 0.875rem;">
                <i class="fas fa-paper-plane me-1"></i>Didn't get OTP? Resend OTP again.
              </button>
            </div>

              <!-- Password Field -->
              <div class="mb-4">
                <label for="signup_password" class="block text-sm font-medium mb-2 text-orange-600">Password
                  <span class="text-red-500">*</span></label>
                <input type="password"
                  class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                  id="signup_password" name="password" placeholder="Enter your password" minlength="8">
                <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
                <small class="text-gray-500 text-xs">Password must contain at least 8 characters with one uppercase alphabet and one numeric character.</small>
              </div>

              <!-- Confirm Password Field -->
              <div class="mb-4">
                <label for="signup_confirm_password" class="block text-sm font-medium mb-2 text-orange-600">Confirm
                  Password
                  <span class="text-red-500">*</span></label>
                <input type="password"
                  class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                  id="signup_confirm_password" name="confirm_password" placeholder="Confirm your password"
                  minlength="8">
                <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
              </div>

              <!-- Complete Registration Button -->
              <div class="mb-4">
                <button type="submit" class="w-full btn-lg ct-btn" id="signupSubmitBtn">
                  <span class="signup-btn-text">COMPLETE REGISTRATION</span>
                  <span class="signup-btn-loading d-none">
                    <i class="fas fa-spinner fa-spin me-2"></i>Verifying...
                  </span>
                </button>
              </div>
            </div>

            <!-- Already Have Account -->
            <div class="text-center">
              <p class="mb-0 text-gray-500 text-sm">
                Already have an account?
                <a href="#" class="text-orange-500 no-underline hover:text-orange-600" data-bs-toggle="modal"
                  data-bs-target="#loginModal" data-bs-dismiss="modal">
                  <strong>Log In</strong>
                </a>
              </p>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Forgot Password Modal -->
  <div class="modal fade lalit-login-modal" id="forgotPasswordModal" tabindex="-1"
    aria-labelledby="forgotPasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header border-0 pb-0">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body px-5 pb-5">
          <!-- Header -->
          <div class="text-center mb-4">
            <h2 class="modal-title text-2xl font-bold text-gray-800 mb-2" id="forgotPasswordModalLabel">
              Forgot Password</h2>
            <p class="text-gray-600 text-sm">Enter your email address to receive a OTP on your email and associated mobile number
              to reset password</p>
          </div>

          <!-- Alert Messages -->
          <div id="forgotPasswordAlert" class="alert d-none mb-4" role="alert"></div>

          <!-- Step 1: Send OTP Form -->
          <form id="sendOtpForm">
            @csrf
            <div id="emailStep">
              <!-- Email Field -->
              <div class="mb-4">
                <label for="resetEmail" class="block text-sm font-medium mb-2 text-orange-600">Email
                  Address <span class="text-red-500">*</span></label>
                <input type="email"
                  class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                  id="resetEmail" name="email" placeholder="Enter your email address" required>
                <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
              </div>

              <!-- Send OTP Button -->
              <div class="mb-4">
                <button type="submit" class="w-full btn-lg ct-btn" id="sendResetOtpBtn">
                  <span class="send-otp-text">SEND OTP</span>
                  <span class="send-otp-loading d-none">
                    <i class="fas fa-spinner fa-spin me-2"></i>Sending...
                  </span>
                </button>
              </div>
            </div>
          </form>

          <!-- Step 2: Reset Password Form -->
          <form id="resetPasswordForm" class="d-none">
            @csrf
            <input type="hidden" id="resetPasswordEmail" name="email">

            <!-- OTP Code Field -->
            <div class="mb-4">
              <label for="resetKey" class="block text-sm font-medium mb-2 text-orange-600">OTP Code <span
                  class="text-red-500">*</span></label>
              <input type="text"
                class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                id="resetKey" name="reset_key" placeholder="Enter OTP code from email" required>
              <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
            </div>

            <!-- New Password Field -->
            <div class="mb-4">
              <label for="newPassword" class="block text-sm font-medium mb-2 text-orange-600">New Password
                <span class="text-red-500">*</span></label>
              <input type="password"
                class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                id="newPassword" name="new_password" placeholder="Enter new password" minlength="8" required>
              <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
              <small class="text-gray-500 text-xs">Password must contain at least 8 characters with one upper case alphabet and one numeric character.</small>
            </div>

            <!-- Confirm Password Field -->
            <div class="mb-4">
              <label for="confirmPassword" class="block text-sm font-medium mb-2 text-orange-600">Confirm
                Password <span class="text-red-500">*</span></label>
              <input type="password"
                class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                id="confirmPassword" name="confirm_password" placeholder="Confirm new password" minlength="6" required>
              <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
            </div>

            <!-- Reset Password Button -->
            <div class="mb-4">
              <button type="submit" class="w-full btn-lg ct-btn" id="resetPasswordBtn">
                <span class="reset-password-text">RESET PASSWORD</span>
                <span class="reset-password-loading d-none">
                  <i class="fas fa-spinner fa-spin me-2"></i>Resetting...
                </span>
              </button>
            </div>

            <!-- Resend OTP Link -->
            <div class="text-center">
              <a href="#" id="resendOtpLink" class="text-orange-500 text-sm no-underline hover:text-orange-600">
                Didn't receive the code? Resend OTP
              </a>
            </div>
          </form>

          <!-- Back to Login -->
          <div class="text-center mt-4">
            <a href="#" class="text-gray-600 text-sm no-underline hover:text-gray-800" data-bs-toggle="modal"
              data-bs-target="#loginModal" data-bs-dismiss="modal">
              <i class="fas fa-arrow-left me-1"></i> Back to Login
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  @stack('scripts')

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const header = document.querySelector('header');
      const stickyNav = document.getElementById('sticky-page-nav');
      const navLinks = document.querySelectorAll('#sticky-page-nav .nav-link');

      // Fix for mobile navigation links in off-canvas menu
      const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
      const offcanvasMenu = document.getElementById('offcanvasMenu');

      mobileNavLinks.forEach(link => {
        link.addEventListener('click', function (e) {
          const href = this.getAttribute('href');
          const bsOffcanvas = bootstrap.Offcanvas.getInstance(offcanvasMenu);

          // If it's a hash link, handle special navigation
          if (href.startsWith('#')) {
            e.preventDefault();

            // Close the offcanvas menu
            if (bsOffcanvas) {
              bsOffcanvas.hide();

              // Wait for offcanvas to close before scrolling
              offcanvasMenu.addEventListener('hidden.bs.offcanvas', function scrollToTarget() {
                const targetElement = document.querySelector(href);
                if (targetElement) {
                  setTimeout(() => {
                    window.scrollTo({
                      top: targetElement.offsetTop - 100,
                      behavior: 'smooth'
                    });
                  }, 150);
                }
                // Remove event listener to avoid multiple executions
                offcanvasMenu.removeEventListener('hidden.bs.offcanvas', scrollToTarget);
              });
            }
          } else {
            // For non-hash links, just close the menu (default navigation will happen)
            if (bsOffcanvas) {
              bsOffcanvas.hide();
            }
          }
        });
      });

      // Handle scrolling events to show/hide sticky menu
      window.addEventListener('scroll', function () {
        if (!header) return;

        const headerBottom = header.getBoundingClientRect().bottom;

        // Show sticky nav when scrolled past header
        if (headerBottom <= 0) {
          stickyNav.classList.remove('d-none');
        } else {
          stickyNav.classList.add('d-none');
        }
      });

      // Handle navigation link clicks for smooth scrolling
      navLinks.forEach(link => {
        link.addEventListener('click', function (e) {
          const targetId = this.getAttribute('href');
          if (targetId && targetId.startsWith('#')) {
            e.preventDefault();
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
              // Calculate offset with sticky nav height
              const stickyNavHeight = stickyNav.offsetHeight;
              const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - stickyNavHeight;

              // Smooth scroll to target position
              window.scrollTo({
                top: targetPosition,
                behavior: 'smooth'
              });

              // Update active state for secondary navigation only
              navLinks.forEach(link => link.classList.remove('active'));
              this.classList.add('active');
            }
          }
        });
      });

      // Login Tab Functionality
      const mobileTab = document.getElementById('mobile-tab');
      const memberTab = document.getElementById('member-tab');
      const mobileLoginPane = document.getElementById('mobile-login');
      const memberLoginPane = document.getElementById('member-login');
      const loginMethodInput = document.getElementById('login_method');
      const sendOtpBtn = document.getElementById('sendOtpBtn');

      // Tab switching functionality
      function switchToMobileLogin() {
        // Update tab appearance
        mobileTab.classList.add('active');
        memberTab.classList.remove('active');

        // Show/hide content
        mobileLoginPane.classList.add('show', 'active');
        memberLoginPane.classList.remove('show', 'active');

        // Update login method
        loginMethodInput.value = 'mobile';

        // Manage field requirements
        const mobileField = document.getElementById('mobile_number');
        const otpField = document.getElementById('otp');
        const memberField = document.getElementById('membership_number');
        const passwordField = document.getElementById('loginPassword');

        if (mobileField) mobileField.required = true;
        if (otpField) otpField.required = true;
        if (memberField) memberField.required = false;
        if (passwordField) passwordField.required = false;
      }

      function switchToMemberLogin() {
        // Update tab appearance
        memberTab.classList.add('active');
        mobileTab.classList.remove('active');

        // Show/hide content
        memberLoginPane.classList.add('show', 'active');
        mobileLoginPane.classList.remove('show', 'active');

        // Update login method
        loginMethodInput.value = 'member';

        // Manage field requirements
        const mobileField = document.getElementById('mobile_number');
        const otpField = document.getElementById('otp');
        const memberField = document.getElementById('membership_number');
        const passwordField = document.getElementById('loginPassword');

        if (mobileField) mobileField.required = false;
        if (otpField) otpField.required = false;
        if (memberField) memberField.required = true;
        if (passwordField) passwordField.required = true;
      }

      // Add event listeners for tab switching
      if (mobileTab) {
        mobileTab.addEventListener('click', switchToMobileLogin);
      }

      if (memberTab) {
        memberTab.addEventListener('click', switchToMemberLogin);
      }

      // Send OTP functionality
      if (sendOtpBtn) {
        sendOtpBtn.addEventListener('click', async function () {
          const mobileNumber = document.getElementById('mobile_number').value;

          if (!mobileNumber || mobileNumber.length !== 10) {
            alert('Please enter a valid 10-digit mobile number');
            return;
          }

          // Disable button and show loading state
          this.disabled = true;
          const originalText = this.innerHTML;
          this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Sending...';

          try {
            const response = await fetch('/membership/send-otp', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
              },
              body: JSON.stringify({
                mobile_number: mobileNumber
              })
            });

            const data = await response.json();

            if (data.success) {
              this.innerHTML = '<i class="fas fa-paper-plane me-1"></i>Resend OTP';
              alert('OTP sent successfully to your mobile number!');

              // Start countdown timer (optional)
              let countdown = 30;
              const timer = setInterval(() => {
                if (countdown > 0) {
                  this.innerHTML = `<i class="fas fa-clock me-1"></i>Resend in ${countdown}s`;
                  countdown--;
                } else {
                  clearInterval(timer);
                  this.innerHTML = '<i class="fas fa-paper-plane me-1"></i>Resend OTP';
                  this.disabled = false;
                }
              }, 1000);
            } else {
              throw new Error(data.message || 'Failed to send OTP');
            }
          } catch (error) {
            console.error('OTP Send Error:', error);
            this.disabled = false;
            this.innerHTML = originalText;
            alert('Failed to send OTP: ' + (error.message || 'Please try again later'));
          }
        });
      }

      // Initialize with mobile login tab active
      switchToMobileLogin();

      // Password toggle functionality for login modal
      const togglePassword = document.getElementById('togglePassword');
      const passwordField = document.getElementById('loginPassword');

      if (togglePassword && passwordField) {
        togglePassword.addEventListener('click', function () {
          const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
          passwordField.setAttribute('type', type);

          // Toggle the eye icon
          const icon = this.querySelector('i');
          if (type === 'password') {
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
          } else {
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
          }
        });
      }
      // Handle right-side modal animation
      const loginModal = document.getElementById('loginModal');
      if (loginModal) {
        loginModal.addEventListener('show.bs.modal', function () {
          document.body.style.overflow = 'hidden';
        });
        loginModal.addEventListener('hidden.bs.modal', function () {
          document.body.style.overflow = '';
        });
      }

      // Login form submission is handled by membership.js (jQuery delegation)
      // No need for additional event listener here to avoid duplicate API calls

      // Email OTP Verification Handlers
      let emailVerified = false;
      const sendEmailOtpBtn = document.getElementById('sendEmailOtpBtn');
      const emailInput = document.getElementById('email');
      const emailOtpField = document.getElementById('emailOtpField');
      const emailOtpInput = document.getElementById('email_otp');
      const signupContinueBtn = document.getElementById('signupContinueBtn');

      // Send Email OTP
      if (sendEmailOtpBtn && emailInput) {
        sendEmailOtpBtn.addEventListener('click', async function(e) {
          e.preventDefault();

          const email = emailInput.value.trim();
          
          // Validate email
          if (!email || !email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
            emailInput.classList.add('is-invalid');
            const feedback = emailInput.nextElementSibling.nextElementSibling;
            if (feedback && feedback.classList.contains('invalid-feedback')) {
              feedback.textContent = 'Please enter a valid email address';
              feedback.style.display = 'block';
            }
            return;
          }

          emailInput.classList.remove('is-invalid');
          
          const btnText = this.querySelector('.send-otp-text');
          const btnLoading = this.querySelector('.send-otp-loading');
          
          // Show loading
          this.disabled = true;
          btnText.classList.add('d-none');
          btnLoading.classList.remove('d-none');

          try {
            const response = await fetch('{{ route('membership.send-email-otp') }}', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest'
              },
              body: JSON.stringify({ email: email })
            });

            const data = await response.json();

            if (data.success) {
              // Show success message
              const successMsg = document.getElementById('emailOtpSuccess');
              if (successMsg) {
                successMsg.textContent = data.message;
                successMsg.classList.remove('d-none');
              }

              // Show OTP input field
              emailOtpField.classList.remove('d-none');
              
              // Disable email input
              emailInput.setAttribute('readonly', true);
              
              // Change button text to "Resend OTP"
              btnText.textContent = 'RESEND OTP';
              
              // Auto-focus on OTP input
              emailOtpInput.focus();

            } else {
              // Show error
              emailInput.classList.add('is-invalid');
              const feedback = emailInput.nextElementSibling.nextElementSibling;
              if (feedback && feedback.classList.contains('invalid-feedback')) {
                feedback.textContent = data.message || 'Failed to send OTP';
                feedback.style.display = 'block';
              }
            }

          } catch (error) {
            console.error('Send Email OTP Error:', error);
            emailInput.classList.add('is-invalid');
            const feedback = emailInput.nextElementSibling.nextElementSibling;
            if (feedback && feedback.classList.contains('invalid-feedback')) {
              feedback.textContent = 'Failed to send OTP. Please try again.';
              feedback.style.display = 'block';
            }
          } finally {
            // Reset button
            this.disabled = false;
            btnText.classList.remove('d-none');
            btnLoading.classList.add('d-none');
          }
        });
      }

      // Verify Email OTP on input
      if (emailOtpInput && emailInput) {
        emailOtpInput.addEventListener('input', async function(e) {
          const otp = this.value.trim();
          
          // Only verify when 6 digits are entered
          if (otp.length !== 6) {
            return;
          }

          const email = emailInput.value.trim();
          
          try {
            const response = await fetch('{{ route('membership.verify-email-otp') }}', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest'
              },
              body: JSON.stringify({ 
                email: email,
                otp: otp 
              })
            });

            const data = await response.json();

            if (data.success) {
              // Mark email as verified
              emailVerified = true;
              
              // Show success message
              const verifiedMsg = document.getElementById('emailOtpVerified');
              const errorMsg = document.getElementById('emailOtpError');
              if (verifiedMsg) {
                verifiedMsg.classList.remove('d-none');
              }
              if (errorMsg) {
                errorMsg.classList.add('d-none');
              }
              
              // Remove invalid class and add valid class
              this.classList.remove('is-invalid');
              this.classList.add('is-valid');
              
              // Disable the OTP input field
              this.disabled = true;
              this.setAttribute('readonly', true);
              
              // Enable continue button
              if (signupContinueBtn) {
                signupContinueBtn.disabled = false;
                const infoText = signupContinueBtn.parentElement.querySelector('small');
                if (infoText) {
                  infoText.classList.add('d-none');
                }
              }

            } else {
              // Show error
              emailVerified = false;
              this.classList.add('is-invalid');
              const errorMsg = document.getElementById('emailOtpError');
              if (errorMsg) {
                errorMsg.textContent = data.message || 'Invalid OTP';
                errorMsg.classList.remove('d-none');
              }
              
              // Keep continue button disabled
              if (signupContinueBtn) {
                signupContinueBtn.disabled = true;
              }
            }

          } catch (error) {
            console.error('Verify Email OTP Error:', error);
            emailVerified = false;
            this.classList.add('is-invalid');
            const errorMsg = document.getElementById('emailOtpError');
            if (errorMsg) {
              errorMsg.textContent = 'Failed to verify OTP. Please try again.';
              errorMsg.classList.remove('d-none');
            }
          }
        });
      }

      // Signup Form Handler - Step 1: Continue Button (Create Member)
      const signupForm = document.getElementById('signupForm');

      if (signupContinueBtn && signupForm) {
        signupContinueBtn.addEventListener('click', async function (e) {
          e.preventDefault();

          const errorAlert = document.getElementById('signupErrorAlert');
          const loadingOverlay = document.getElementById('signupLoadingOverlay');
          const btnText = this.querySelector('.signup-continue-text');
          const btnLoading = this.querySelector('.signup-continue-loading');

          // Clear previous errors
          errorAlert.classList.add('d-none');
          signupForm.querySelectorAll('.form-control').forEach(field => {
            field.classList.remove('is-invalid');
            const feedback = field.nextElementSibling;
            if (feedback && feedback.classList.contains('invalid-feedback')) {
              feedback.textContent = '';
            }
          });

          // Validate Step 1 fields
          const firstName = document.getElementById('first_name').value.trim();
          const lastName = document.getElementById('last_name').value.trim();
          const email = document.getElementById('email').value.trim();
          const mobile = document.getElementById('mobile').value.trim();
          const termsAccepted = document.getElementById('terms_accepted').checked;

          if (!firstName || !lastName || !email || !mobile || !termsAccepted) {
            const errorMsg = document.getElementById('signupErrorMessage');
            errorMsg.textContent = 'Please fill in all required fields.';
            errorAlert.classList.remove('d-none');
            return;
          }

          // Check if email is verified
          if (!emailVerified) {
            const errorMsg = document.getElementById('signupErrorMessage');
            errorMsg.textContent = 'Please verify your email address before continuing.';
            errorAlert.classList.remove('d-none');
            return;
          }

          // Show loading
          loadingOverlay.classList.remove('d-none');
          this.disabled = true;
          btnText.classList.add('d-none');
          btnLoading.classList.remove('d-none');

          try {
            // Step 1: Create member
            const formData = new FormData(signupForm);
            const response = await fetch('{{ route('membership.register') }}', {
              method: 'POST',
              body: formData,
              headers: {
                'X-Requested-With': 'XMLHttpRequest'
              }
            });

            const data = await response.json();

            // Hide loading
            loadingOverlay.classList.add('d-none');
            this.disabled = false;
            btnText.classList.remove('d-none');
            btnLoading.classList.add('d-none');

            if (data.success) {
              // Store member data
              document.getElementById('member_id').value = data.member_id || '';
              document.getElementById('member_email').value = email;

              // Step 2: Send OTP to mobile
              const otpResponse = await fetch('{{ route('membership.send-reset-otp') }}', {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json',
                  'X-CSRF-TOKEN': '{{ csrf_token() }}',
                  'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ email: email })
              });

              const otpData = await otpResponse.json();

              if (otpData.status === 'success' || otpData.success) {
                // Move to Step 2
                document.getElementById('signupStep1').classList.add('d-none');
                document.getElementById('signupStep2').classList.remove('d-none');
              } else {
                throw new Error(otpData.message || 'Failed to send OTP');
              }
            } else {
              // Show error message
              const errorMsg = document.getElementById('signupErrorMessage');
              let displayMessage = 'Registration failed. Please try again.';
              let errorList = [];

              // Extract field-specific errors
              let fieldErrors = null;
              if (data.message && data.message.user) {
                fieldErrors = data.message.user;
              } else if (data.details && data.details.error && data.details.error.user) {
                fieldErrors = data.details.error.user;
              } else if (data.errors) {
                fieldErrors = data.errors;
              }

              if (fieldErrors) {
                // Collect all error messages
                Object.keys(fieldErrors).forEach(fieldName => {
                  const errors = fieldErrors[fieldName];
                  if (Array.isArray(errors)) {
                    errorList.push(...errors);
                  } else if (typeof errors === 'string') {
                    errorList.push(errors);
                  }

                  // Also mark the field as invalid
                  const field = signupForm.querySelector(`[name=\"${fieldName}\"]`);
                  if (field) {
                    field.classList.add('is-invalid');
                    const feedback = field.nextElementSibling;
                    if (feedback && feedback.classList.contains('invalid-feedback')) {
                      let errorText = '';
                      if (Array.isArray(fieldErrors[fieldName])) {
                        if (typeof fieldErrors[fieldName][0] === 'object' && fieldErrors[fieldName][0].message) {
                          errorText = fieldErrors[fieldName][0].message;
                        } else {
                          errorText = fieldErrors[fieldName][0];
                        }
                      } else {
                        errorText = fieldErrors[fieldName];
                      }
                      feedback.textContent = errorText;
                    }
                  }
                });
              }

              // Display all errors in the alert box
              if (errorList.length > 0) {
                if (errorList.length === 1) {
                  errorMsg.textContent = errorList[0];
                } else {
                  errorMsg.innerHTML = '<strong>Please fix the following errors:</strong><ul class="mb-0 mt-2 ps-3">' +
                    errorList.map(err => `<li>${err}</li>`).join('') +
                    '</ul>';
                }
              } else if (typeof data.message === 'string') {
                errorMsg.textContent = data.message;
              } else {
                errorMsg.textContent = displayMessage;
              }

              errorAlert.classList.remove('d-none');
            }
          } catch (error) {
            console.error('Signup error:', error);
            loadingOverlay.classList.add('d-none');
            this.disabled = false;
            btnText.classList.remove('d-none');
            btnLoading.classList.add('d-none');

            const errorMsg = document.getElementById('signupErrorMessage');
            errorMsg.textContent = error.message || 'An error occurred. Please try again later.';
            errorAlert.classList.remove('d-none');
          }
        });
      }

      // Signup Form Handler - Step 2: Complete Registration (Verify OTP and Set Password)
      if (signupForm) {
        signupForm.addEventListener('submit', async function (e) {
          e.preventDefault();

          const errorAlert = document.getElementById('signupErrorAlert');
          const successAlert = document.getElementById('signupSuccessAlert');
          const loadingOverlay = document.getElementById('signupLoadingOverlay');
          const submitBtn = document.getElementById('signupSubmitBtn');
          const btnText = submitBtn.querySelector('.signup-btn-text');
          const btnLoading = submitBtn.querySelector('.signup-btn-loading');

          // Clear previous errors
          errorAlert.classList.add('d-none');
          successAlert.classList.add('d-none');
          signupForm.querySelectorAll('#signupStep2 .form-control').forEach(field => {
            field.classList.remove('is-invalid');
            const feedback = field.nextElementSibling;
            if (feedback && feedback.classList.contains('invalid-feedback')) {
              feedback.textContent = '';
            }
          });

          // Validate Step 2 fields
          const otp = document.getElementById('signup_otp').value.trim();
          const password = document.getElementById('signup_password').value;
          const confirmPassword = document.getElementById('signup_confirm_password').value;
          const memberEmail = document.getElementById('member_email').value;

          if (!otp || !password || !confirmPassword) {
            const errorMsg = document.getElementById('signupErrorMessage');
            errorMsg.textContent = 'Please fill in all required fields.';
            errorAlert.classList.remove('d-none');
            return;
          }

          if (password !== confirmPassword) {
            const confirmField = document.getElementById('signup_confirm_password');
            confirmField.classList.add('is-invalid');
            const feedback = confirmField.nextElementSibling;
            if (feedback && feedback.classList.contains('invalid-feedback')) {
              feedback.textContent = 'Passwords do not match.';
            }
            return;
          }

          if (password.length < 8) {
            const passwordField = document.getElementById('signup_password');
            passwordField.classList.add('is-invalid');
            const feedback = passwordField.nextElementSibling;
            if (feedback && feedback.classList.contains('invalid-feedback')) {
              feedback.textContent = 'Password must be at least 8 characters.';
            }
            return;
          }

          // check password is alphanumeric with at least one uppercase letter
          const passwordPattern = /^(?=.*[A-Z])(?=.*\d).+$/;
          if (!passwordPattern.test(password)) {
            const passwordField = document.getElementById('signup_password');
            passwordField.classList.add('is-invalid');
            const feedback = passwordField.nextElementSibling;
            if (feedback && feedback.classList.contains('invalid-feedback')) {
              feedback.textContent = 'Password is not valid. Please check again.';
            }
            return;
          }

          // Show loading
          loadingOverlay.classList.remove('d-none');
          submitBtn.disabled = true;
          btnText.classList.add('d-none');
          btnLoading.classList.remove('d-none');

          try {
            // Call reset password API with OTP
            const response = await fetch('{{ route('membership.reset-password') }}', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest'
              },
              body: JSON.stringify({
                email: memberEmail,
                reset_key: otp,
                new_password: password
              })
            });

            const data = await response.json();

            // Hide loading
            loadingOverlay.classList.add('d-none');
            submitBtn.disabled = false;
            btnText.classList.remove('d-none');
            btnLoading.classList.add('d-none');

            if (data.success) {
              // Show success message with member ID
              const memberId = document.getElementById('member_id').value;
              const successMsg = document.getElementById('signupSuccessMessage');
              successMsg.innerHTML = `<strong>Registration Successful!</strong><br>Your Member ID: <strong>${memberId}</strong><br>Redirecting to dashboard...`;
              successAlert.classList.remove('d-none');

              // Reset form
              signupForm.reset();
              document.getElementById('signupStep1').classList.remove('d-none');
              document.getElementById('signupStep2').classList.add('d-none');

              // Redirect to dashboard after 3 seconds
              setTimeout(() => {
                window.location.href = '{{ route('membership.dashboard') }}';
              }, 3000);
            } else {
              // Show error
              const errorMsg = document.getElementById('signupErrorMessage');
              
              // Handle different message formats
              let errorMessage = 'Failed to verify OTP. Please try again.';
              let isHtmlMessage = false;
              
              if (data.message) {
                if (Array.isArray(data.message)) {
                  // Message is an array of error objects
                  const errorMessages = [];
                  data.message.forEach(error => {
                    if (error.message) {
                      // Remove brackets and quotes if present: "['error']" -> "error"
                      let cleanMessage = error.message.replace(/^\[\'(.+)\'\]$/, '$1');
                      errorMessages.push(cleanMessage);
                    }
                  });
                  
                  if (errorMessages.length > 0) {
                    if (errorMessages.length === 1) {
                      errorMessage = errorMessages[0];
                    } else {
                      // Multiple errors - show as list
                      isHtmlMessage = true;
                      errorMessage = '<i class="fas fa-exclamation-circle me-2"></i><strong>Please fix the following errors:</strong><ul class="mb-0 mt-2 ps-3">' +
                        errorMessages.map(msg => `<li>${msg}</li>`).join('') +
                        '</ul>';
                    }
                  }
                } else if (typeof data.message === 'string') {
                  // Message is a simple string
                  errorMessage = data.message;
                }
              }
              
              // Set message content
              if (isHtmlMessage) {
                errorMsg.innerHTML = errorMessage;
              } else {
                errorMsg.textContent = errorMessage;
              }
              
              errorAlert.classList.remove('d-none');

              // Highlight OTP field if invalid
              if (data.message && (typeof data.message === 'string' && data.message.includes('OTP'))) {
                const otpField = document.getElementById('signup_otp');
                otpField.classList.add('is-invalid');
                const feedback = otpField.nextElementSibling;
                if (feedback && feedback.classList.contains('invalid-feedback')) {
                  feedback.textContent = 'Invalid OTP. Please check and try again.';
                }
              }
            }
          } catch (error) {
            console.error('Verification error:', error);
            loadingOverlay.classList.add('d-none');
            submitBtn.disabled = false;
            btnText.classList.remove('d-none');
            btnLoading.classList.add('d-none');

            const errorMsg = document.getElementById('signupErrorMessage');
            errorMsg.textContent = 'An error occurred. Please try again later.';
            errorAlert.classList.remove('d-none');
          }
        });
      }

      // Back button handler
      const signupBackBtn = document.getElementById('signupBackBtn');
      if (signupBackBtn) {
        signupBackBtn.addEventListener('click', function () {
          document.getElementById('signupStep2').classList.add('d-none');
          document.getElementById('signupStep1').classList.remove('d-none');
          document.getElementById('signupErrorAlert').classList.add('d-none');
        });
      }

      // Resend OTP button handler for signup Step 2
      const resendOtpResetBtn = document.getElementById('resendOtpResetBtn');
      if (resendOtpResetBtn) {
        resendOtpResetBtn.addEventListener('click', async function () {
          const memberEmail = document.getElementById('member_email').value;
          
          if (!memberEmail) {
            alert('Email not found. Please start registration again.');
            return;
          }

          // Disable button and show loading state
          this.disabled = true;
          const originalText = this.innerHTML;
          this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Sending...';

          try {
            const response = await fetch('{{ route('membership.send-reset-otp') }}', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest'
              },
              body: JSON.stringify({ email: memberEmail })
            });

            const data = await response.json();

            if (data.status === 'success' || data.success) {
              this.innerHTML = '<i class="fas fa-check me-1"></i>OTP Sent!';
              alert('OTP has been resent to your mobile number and email!');

              // Start countdown timer
              let countdown = 30;
              const timer = setInterval(() => {
                if (countdown > 0) {
                  this.innerHTML = `<i class="fas fa-clock me-1"></i>Resend in ${countdown}s`;
                  countdown--;
                } else {
                  clearInterval(timer);
                  this.innerHTML = originalText;
                  this.disabled = false;
                }
              }, 1000);
            } else {
              throw new Error(data.message || 'Failed to resend OTP');
            }
          } catch (error) {
            console.error('Resend OTP Error:', error);
            this.disabled = false;
            this.innerHTML = originalText;
            alert('Failed to resend OTP: ' + (error.message || 'Please try again later'));
          }
        });
      }

      // Forgot Password Link Handler
      const forgotPasswordLink = document.getElementById('forgotPasswordLink');
      if (forgotPasswordLink) {
        forgotPasswordLink.addEventListener('click', function (e) {
          e.preventDefault();

          // Close login modal
          const loginModal = bootstrap.Modal.getInstance(document.getElementById('loginModal'));
          if (loginModal) {
            loginModal.hide();
          }

          // Reset forgot password form
          resetForgotPasswordForm();

          // Show forgot password modal
          const forgotPasswordModal = new bootstrap.Modal(document.getElementById('forgotPasswordModal'));
          forgotPasswordModal.show();
        });
      }

      // Send OTP Form Handler
      const sendOtpForm = document.getElementById('sendOtpForm');
      if (sendOtpForm) {
        sendOtpForm.addEventListener('submit', function (e) {
          e.preventDefault();

          const alertBox = document.getElementById('forgotPasswordAlert');
          const emailInput = document.getElementById('resetEmail');
          const submitBtn = document.getElementById('sendResetOtpBtn');
          const btnText = submitBtn.querySelector('.send-otp-text');
          const btnLoading = submitBtn.querySelector('.send-otp-loading');

          // Clear previous alerts
          alertBox.classList.add('d-none');
          emailInput.classList.remove('is-invalid');

          // Show loading state
          submitBtn.disabled = true;
          btnText.classList.add('d-none');
          btnLoading.classList.remove('d-none');

          // Get form data
          const formData = new FormData(sendOtpForm);

          // Submit via AJAX
          fetch('/membership/send-reset-otp', {
            method: 'POST',
            body: formData,
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            }
          })
            .then(response => response.json())
            .then(data => {
              // Hide loading state
              submitBtn.disabled = false;
              btnText.classList.remove('d-none');
              btnLoading.classList.add('d-none');

              if (data.status === 'success') {
                // Show success message
                alertBox.className = 'alert alert-success mb-4';
                alertBox.textContent = data.message || 'OTP has been sent to your email address.';
                alertBox.classList.remove('d-none');

                // Store email for next step
                document.getElementById('resetPasswordEmail').value = emailInput.value;

                // Hide email step, show reset password step
                document.getElementById('emailStep').classList.add('d-none');
                sendOtpForm.classList.add('d-none');
                document.getElementById('resetPasswordForm').classList.remove('d-none');

                // Update modal title
                document.getElementById('forgotPasswordModalLabel').textContent = 'Reset Password';
                document.querySelector('#forgotPasswordModal .text-gray-600').textContent = 'Enter the OTP code sent to your email/mobile number and your new password';
              } else {
                // Show error message
                alertBox.className = 'alert alert-danger mb-4';

                // Handle nested message object or string
                let errorMessage = 'Failed to send OTP. Please try again.';
                if (data.message) {
                  if (typeof data.message === 'object' && data.message.message) {
                    errorMessage = data.message.message;
                  } else if (typeof data.message === 'string') {
                    errorMessage = data.message;
                  }
                }

                alertBox.textContent = errorMessage;
                alertBox.classList.remove('d-none');

                // Handle field errors
                if (data.errors && data.errors.email) {
                  emailInput.classList.add('is-invalid');
                  const feedback = emailInput.nextElementSibling;
                  if (feedback && feedback.classList.contains('invalid-feedback')) {
                    feedback.textContent = Array.isArray(data.errors.email) ? data.errors.email[0] : data.errors.email;
                  }
                }
              }
            })
            .catch(error => {
              console.error('Send OTP error:', error);

              // Hide loading state
              submitBtn.disabled = false;
              btnText.classList.remove('d-none');
              btnLoading.classList.add('d-none');

              // Show error
              alertBox.className = 'alert alert-danger mb-4';
              alertBox.textContent = 'An error occurred. Please try again later.';
              alertBox.classList.remove('d-none');
            });
        });
      }

      // Reset Password Form Handler
      const resetPasswordForm = document.getElementById('resetPasswordForm');
      if (resetPasswordForm) {
        resetPasswordForm.addEventListener('submit', function (e) {
          e.preventDefault();

          const alertBox = document.getElementById('forgotPasswordAlert');
          const resetKeyInput = document.getElementById('resetKey');
          const newPasswordInput = document.getElementById('newPassword');
          const confirmPasswordInput = document.getElementById('confirmPassword');
          const submitBtn = document.getElementById('resetPasswordBtn');
          const btnText = submitBtn.querySelector('.reset-password-text');
          const btnLoading = submitBtn.querySelector('.reset-password-loading');

          // Clear previous alerts and errors
          alertBox.classList.add('d-none');
          resetPasswordForm.querySelectorAll('.form-control').forEach(field => {
            field.classList.remove('is-invalid');
          });

          // Validate password confirmation
          if (newPasswordInput.value !== confirmPasswordInput.value) {
            confirmPasswordInput.classList.add('is-invalid');
            const feedback = confirmPasswordInput.nextElementSibling;
            if (feedback && feedback.classList.contains('invalid-feedback')) {
              feedback.textContent = 'Passwords do not match.';
            }
            return;
          }

          // Show loading state
          submitBtn.disabled = true;
          btnText.classList.add('d-none');
          btnLoading.classList.remove('d-none');

          // Get form data
          const formData = new FormData(resetPasswordForm);

          // Submit via AJAX
          fetch('/membership/reset-password', {
            method: 'POST',
            body: formData,
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            }
          })
            .then(response => response.json())
            .then(data => {
              // Hide loading state
              submitBtn.disabled = false;
              btnText.classList.remove('d-none');
              btnLoading.classList.add('d-none');

              if (data.success) {
                // Show success message
                alertBox.className = 'alert alert-success mb-4';
                alertBox.textContent = data.message || 'Password reset successfully! You can now login with your new password.';
                alertBox.classList.remove('d-none');

                // Wait 2 seconds then close modal and open login modal
                setTimeout(() => {
                  const forgotPasswordModal = bootstrap.Modal.getInstance(document.getElementById('forgotPasswordModal'));
                  if (forgotPasswordModal) {
                    forgotPasswordModal.hide();
                  }

                  // Reset form
                  resetForgotPasswordForm();

                  // Show success message on login modal
                  const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
                  loginModal.show();

                  // Show success message in login modal (if you have an alert there)
                  const loginAlert = document.getElementById('loginErrorAlert');
                  if (loginAlert) {
                    loginAlert.className = 'alert alert-success mb-4';
                    const loginErrorMsg = document.getElementById('loginErrorMessage');
                    if (loginErrorMsg) {
                      loginErrorMsg.textContent = 'Password reset successfully! Please login with your new password.';
                    }
                    loginAlert.classList.remove('d-none');

                    // Hide after 5 seconds
                    setTimeout(() => {
                      loginAlert.classList.add('d-none');
                    }, 5000);
                  }
                }, 2000);
              } else {
                // Show error message
                alertBox.className = 'alert alert-danger mb-4';
                
                // Handle different message formats
                let errorMessage = 'Failed to reset password. Please try again.';
                let isHtmlMessage = false;
                
                if (data.message) {
                  if (Array.isArray(data.message)) {
                    // Message is an array of error objects
                    const errorMessages = [];
                    data.message.forEach(error => {
                      if (error.message) {
                        // Remove brackets and quotes if present: "['error']" -> "error"
                        let cleanMessage = error.message.replace(/^\[\'(.+)\'\]$/, '$1');
                        errorMessages.push(cleanMessage);
                      }
                    });
                    
                    if (errorMessages.length > 0) {
                      if (errorMessages.length === 1) {
                        errorMessage = errorMessages[0];
                      } else {
                        // Multiple errors - show as list
                        isHtmlMessage = true;
                        errorMessage = '<i class="fas fa-exclamation-circle me-2"></i><strong>Please fix the following errors:</strong><ul class="mb-0 mt-2 ps-3">' +
                          errorMessages.map(msg => `<li>${msg}</li>`).join('') +
                          '</ul>';
                      }
                    }
                  } else if (typeof data.message === 'string') {
                    // Message is a simple string
                    errorMessage = data.message;
                  }
                }
                
                // Set message content
                if (isHtmlMessage) {
                  alertBox.innerHTML = errorMessage;
                } else {
                  alertBox.textContent = errorMessage;
                }
                
                alertBox.classList.remove('d-none');

                // Handle field errors
                if (data.errors) {
                  if (data.errors.reset_key) {
                    resetKeyInput.classList.add('is-invalid');
                    const feedback = resetKeyInput.nextElementSibling;
                    if (feedback && feedback.classList.contains('invalid-feedback')) {
                      feedback.textContent = Array.isArray(data.errors.reset_key) ? data.errors.reset_key[0] : data.errors.reset_key;
                    }
                  }
                  if (data.errors.new_password) {
                    newPasswordInput.classList.add('is-invalid');
                    const feedback = newPasswordInput.nextElementSibling;
                    if (feedback && feedback.classList.contains('invalid-feedback')) {
                      // Handle array of errors
                      let errorText = '';
                      if (Array.isArray(data.errors.new_password)) {
                        errorText = data.errors.new_password.join(' ');
                      } else {
                        errorText = data.errors.new_password;
                      }
                      feedback.textContent = errorText;
                    }
                  }
                }
              }
            })
            .catch(error => {
              console.error('Reset password error:', error);

              // Hide loading state
              submitBtn.disabled = false;
              btnText.classList.remove('d-none');
              btnLoading.classList.add('d-none');

              // Show error
              alertBox.className = 'alert alert-danger mb-4';
              alertBox.textContent = 'An error occurred. Please try again later.';
              alertBox.classList.remove('d-none');
            });
        });
      }

      // Resend OTP Link Handler
      const resendOtpLink = document.getElementById('resendOtpLink');
      if (resendOtpLink) {
        resendOtpLink.addEventListener('click', function (e) {
          e.preventDefault();

          // Reset to email step
          document.getElementById('emailStep').classList.remove('d-none');
          document.getElementById('sendOtpForm').classList.remove('d-none');
          document.getElementById('resetPasswordForm').classList.add('d-none');
          document.getElementById('forgotPasswordAlert').classList.add('d-none');

          // Update modal title back
          document.getElementById('forgotPasswordModalLabel').textContent = 'Forgot Password';
          document.querySelector('#forgotPasswordModal .text-gray-600').textContent = 'Enter your email address to receive a OTP on your email and associated mobile number to reset password';
        });
      }

      // Helper function to reset forgot password form
      function resetForgotPasswordForm() {
        // Clear all inputs
        document.getElementById('resetEmail').value = '';
        document.getElementById('resetKey').value = '';
        document.getElementById('newPassword').value = '';
        document.getElementById('confirmPassword').value = '';
        document.getElementById('resetPasswordEmail').value = '';

        // Clear all errors
        document.querySelectorAll('#forgotPasswordModal .form-control').forEach(field => {
          field.classList.remove('is-invalid');
        });

        // Hide alert
        document.getElementById('forgotPasswordAlert').classList.add('d-none');

        // Reset to email step
        document.getElementById('emailStep').classList.remove('d-none');
        document.getElementById('sendOtpForm').classList.remove('d-none');
        document.getElementById('resetPasswordForm').classList.add('d-none');

        // Reset modal title
        document.getElementById('forgotPasswordModalLabel').textContent = 'Forgot Password';
        document.querySelector('#forgotPasswordModal .text-gray-600').textContent = 'Enter your email address to receive a OTP on your email and associated mobile number to reset password.';
      }

      // Check authentication status on page load
      checkAuthenticationStatus();

      // Setup logout handlers
      setupLogoutHandlers();
    });

    // Check authentication status
    async function checkAuthenticationStatus() {
      try {
        const response = await fetch('/membership/check-auth', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
          }
        });

        const data = await response.json();

        if (data.success) {
          // User is logged in
          showLoggedInState();
        } else {
          // User is not logged in
          showLoggedOutState();
        }
      } catch (error) {
        console.log('Auth check failed:', error);
        showLoggedOutState();
      }
    }

    function showLoggedInState() {
      // Desktop navigation
      document.getElementById('loginNavItem')?.classList.add('d-none');
      document.getElementById('dashboardNavItem')?.classList.remove('d-none');
      document.getElementById('logoutNavItem')?.classList.remove('d-none');
      document.getElementById('joinNowNavItem')?.classList.add('d-none');

      // Mobile navigation
      document.getElementById('mobileLoginBtn')?.classList.add('d-none');
      document.getElementById('mobileDashboardBtn')?.classList.remove('d-none');
      document.getElementById('mobileLogoutBtn')?.classList.remove('d-none');

      // Offcanvas navigation
      document.getElementById('offcanvasLoginBtn')?.classList.add('d-none');
      document.getElementById('offcanvasDashboardBtn')?.classList.remove('d-none');
      document.getElementById('offcanvasLogoutBtn')?.classList.remove('d-none');
      document.getElementById('offcanvasJoinBtn')?.classList.add('d-none');
    }

    function showLoggedOutState() {
      // Desktop navigation
      document.getElementById('loginNavItem')?.classList.remove('d-none');
      document.getElementById('dashboardNavItem')?.classList.add('d-none');
      document.getElementById('logoutNavItem')?.classList.add('d-none');
      document.getElementById('joinNowNavItem')?.classList.remove('d-none');

      // Mobile navigation
      document.getElementById('mobileLoginBtn')?.classList.remove('d-none');
      document.getElementById('mobileDashboardBtn')?.classList.add('d-none');
      document.getElementById('mobileLogoutBtn')?.classList.add('d-none');

      // Offcanvas navigation
      document.getElementById('offcanvasLoginBtn')?.classList.remove('d-none');
      document.getElementById('offcanvasDashboardBtn')?.classList.add('d-none');
      document.getElementById('offcanvasLogoutBtn')?.classList.add('d-none');
      document.getElementById('offcanvasJoinBtn')?.classList.remove('d-none');
    }

    function setupLogoutHandlers() {
      // Desktop logout
      const desktopLogout = document.getElementById('logoutBtn');
      if (desktopLogout) {
        desktopLogout.addEventListener('click', handleLogout);
      }

      // Mobile logout
      const mobileLogout = document.getElementById('mobileLogoutBtn');
      if (mobileLogout) {
        mobileLogout.addEventListener('click', handleLogout);
      }

      // Offcanvas logout
      const offcanvasLogout = document.getElementById('offcanvasLogoutBtn');
      if (offcanvasLogout) {
        offcanvasLogout.addEventListener('click', handleLogout);
      }
    }

    async function handleLogout(event) {
      event.preventDefault();

      try {
        const response = await fetch('/membership/member-logout', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
          }
        });

        const data = await response.json();

        if (data.success) {
          // Update UI to logged out state
          showLoggedOutState();

          // Reload page to show updated state
          window.location.reload();
        } else {
          console.error('Logout failed:', data.message);
          // Still reload even if API failed
          window.location.reload();
        }
      } catch (error) {
        console.error('Logout error:', error);
        // Still reload even if logout failed
        window.location.reload();
      }
    }
  </script>

  <!-- Hero Slider Resize Script -->
  <script src="{{ asset('assets/js/slider-resize.js') }}"></script>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <!-- Membership Related Script -->
  <script src="{{ asset('assets/js/membership.js') }}"></script>
</body>

</html>