<!-- Login & Register Modal -->
<div class="modal fade" id="loginRegisterModal" tabindex="-1" aria-labelledby="loginRegisterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg overflow-hidden">
            <div class="row g-0">
                <!-- Left Side: Branding/Image -->
                <div class="col-md-5 d-none d-md-block bg-teal p-5 text-white text-center d-flex flex-column justify-content-center align-items-center">
                    <img src="./assets/images/logoheader.png" alt="Logo" class="img-fluid mb-4 logo-white" style="max-width: 180px;">
                    <h4 class="fw-bold mb-3">Welcome Back!</h4>
                    <p class="small opacity-75">Connect with the Institute of Somatic Therapy today.</p>
                </div>
                
                <!-- Right Side: Forms -->
                <div class="col-md-7 p-4 p-lg-5 bg-white">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <ul class="nav nav-pills custom-modal-tabs" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active fw-bold text-uppercase small" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Login</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link fw-bold text-uppercase small" id="pills-register-tab" data-bs-toggle="pill" data-bs-target="#pills-register" type="button" role="tab" aria-controls="pills-register" aria-selected="false">Register</button>
                            </li>
                            <!-- Hidden tab for forgot password -->
                            <li class="nav-item d-none" role="presentation">
                                <button class="nav-link fw-bold text-uppercase small" id="pills-forgot-tab" data-bs-toggle="pill" data-bs-target="#pills-forgot" type="button" role="tab" aria-controls="pills-forgot" aria-selected="false">Forgot Password</button>
                            </li>
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="tab-content" id="pills-tabContent">
                        <!-- Login Form -->
                        <div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
                            <form action="#" method="POST">
                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-muted">Email Address</label>
                                    <input type="email" class="form-control modal-input" placeholder="Enter your email" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-muted">Password</label>
                                    <input type="password" class="form-control modal-input" placeholder="Enter your password" required>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="rememberMe">
                                        <label class="form-check-label small text-muted" for="rememberMe">
                                            Remember Me
                                        </label>
                                    </div>
                                    <a href="javascript:void(0);" onclick="showForgotTab()" class="small text-teal text-decoration-none fw-bold">Forgot Password?</a>
                                </div>
                                <button type="submit" class="btn btn-dark-teal w-100 py-3 fw-bold text-uppercase">Login Now</button>
                            </form>
                        </div>

                        <!-- Forgot Password Form -->
                        <div class="tab-pane fade" id="pills-forgot" role="tabpanel" aria-labelledby="pills-forgot-tab">
                            <h5 class="fw-bold mb-3">Forgot Password?</h5>
                            <p class="small text-muted mb-4">Enter your email address and we'll send you a link to reset your password.</p>
                            <form action="#" method="POST">
                                <div class="mb-4">
                                    <label class="form-label small fw-bold text-muted">Email Address</label>
                                    <input type="email" class="form-control modal-input" placeholder="Enter your email" required>
                                </div>
                                <button type="submit" class="btn btn-dark-teal w-100 py-3 fw-bold text-uppercase mb-3">Reset Password</button>
                                <div class="text-center">
                                    <a href="javascript:void(0);" onclick="showLoginTab()" class="small text-teal text-decoration-none fw-bold">Back to Login</a>
                                </div>
                            </form>
                        </div>

                        <!-- Register Form -->
                        <div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab">
                            <form action="#" method="POST">
                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-muted">Full Name</label>
                                    <input type="text" class="form-control modal-input" placeholder="Enter your name" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-muted">Email Address</label>
                                    <input type="email" class="form-control modal-input" placeholder="Enter your email" required>
                                </div>
                                <div class="row g-2 mb-3">
                                    <div class="col-6">
                                        <label class="form-label small fw-bold text-muted">Password</label>
                                        <input type="password" class="form-control modal-input" placeholder="Password" required>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label small fw-bold text-muted">Confirm</label>
                                        <input type="password" class="form-control modal-input" placeholder="Confirm" required>
                                    </div>
                                </div>
                                <div class="mb-4 text-start">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="termsCheck" required>
                                        <label class="form-check-label small text-muted" for="termsCheck">
                                            I agree to the <a href="#" class="text-teal">Terms & Conditions</a>
                                        </label>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-dark-teal w-100 py-3 fw-bold text-uppercase">Create Account</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function showForgotTab() {
    const forgotTab = new bootstrap.Tab(document.getElementById('pills-forgot-tab'));
    forgotTab.show();
}

function showLoginTab() {
    const loginTab = new bootstrap.Tab(document.getElementById('pills-login-tab'));
    loginTab.show();
}
</script>
