<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fixed Layout with Banner & Login</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      body, html {
        height: 100%;
        margin: 0;
        background:#fff;
      }

      header, footer {
        color: #fff;
        text-align: center;
        padding: 10px 0;
        position: relative;
        width: 100%;
        left: 0;
        z-index: 1000;
      }

      header { top: 0; }
      footer { bottom: 0; }

      main {
        margin-top: 0px;
        margin-bottom: 50px;
        height: 100vh;
      }

      .content {
        display: flex;
        height: 100%;
      }

      .banner {
        flex: 0 0 60%;
        background: url('https://via.placeholder.com/800x600.png?text=Banner+Image') center/cover no-repeat;
      }

      .login-section {
        flex: 0 0 40%;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
      }

      .login-box {
        width: 100%;
        max-width: 350px;
        background: #fff;
        padding: 25px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
      }

      @media (max-width: 768px) {
        .content { flex-direction: column; }
        .banner, .login-section { flex: 1 1 100%; height: 50%; }
      }
    </style>
  </head>
  <body>
<div class="container-fluid">
  <div class="container">
    <!-- Header 
    <header>
      <img src="images/top.jpg" class="img-fluid">
    </header>-->

    <!-- Main Content -->
    <main>
      <div class="content">
        <!-- Left Banner -->
        <div class="banner">
          <img src="images/banner.jpg" class="img-fluid w-100 h-100" style="object-fit:contain;"> 
        </div>

        <!-- Right Login/Register Section -->
        <div class="login-section">
            
            
               
               
          <div class="login-box">
            <!-- Tabs Navigation -->
         <!--   <ul class="nav nav-tabs mb-3" id="authTabs" role="tablist">
                   <li class="nav-item" role="presentation">
                <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab">Register</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab">Login</button>
              </li>
           
            </ul>-->
 
   
            <!-- Tab Content -->
            <div class="tab-content" id="authTabsContent">

              <!-- Login Form -->
              <div class="tab-pane fade show active" id="login" role="tabpanel">
                  
                 
                    
                    
                <h5 class="text-center mb-3">Login</h5>
                <form id="loginForm" method="post">
                  <div class="mb-3">
                    <label class="form-label">Enter Email</label>
                    <input type="email" class="form-control" name="email" placeholder="Enter Email Address" required>
                  </div>
                  <div id="loginMsg"></div>
                  <div class="d-grid">
                    <button type="submit" class="btn btn-primary">Login</button>
                  </div>
                </form>
              </div>

              <!-- Register Form -->
              <div class="tab-pane fade" id="register" role="tabpanel">
                <h5 class="text-center mb-3">Register</h5>
                <form id="registerForm" method="post">
                  <div class="mb-3">
                    <label class="form-label">Full Name</label>
                    <input type="text" class="form-control" name="fullname" placeholder="Enter your full name" required>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Mobile No</label>
                    <input type="tel" class="form-control" name="mobile" placeholder="Enter your mobile number" required>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Email ID</label>
                    <input type="email" class="form-control" name="email" placeholder="Enter your email" required>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Place</label>
                    <input type="text" class="form-control" name="place" placeholder="Enter your place" required>
                  </div>
                  <div id="registerMsg"></div>
                  <div class="d-grid">
                    <button type="submit" class="btn btn-success">Register</button>
                  </div>
                </form>
              </div>

            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- Footer 
    <footer>
      <img src="images/bottom.jpg" class="img-fluid">
    </footer>-->
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(function() {

  // REGISTER
  $("#registerForm").on("submit", function(e) {
    e.preventDefault();
    $.ajax({
      url: "ajax_action.php",
      type: "POST",
      data: $(this).serialize() + "&action=register",
      beforeSend: function() {
        $("#registerMsg").html("<div class='text-info'>Processing...</div>");
      },
      success: function(response) {
        $("#registerMsg").html(response);
        $("#registerForm")[0].reset();
      },
      error: function() {
        $("#registerMsg").html("<div class='alert alert-danger'>Error connecting to server.</div>");
      }
    });
  });

  // LOGIN
$("#loginForm").on("submit", function(e) {
  e.preventDefault();
  $.ajax({
    url: "ajax_action.php",
    type: "POST",
    data: $(this).serialize() + "&action=login",
    beforeSend: function() {
      $("#loginMsg").html("<div class='text-info'>Checking...</div>");
    },
    success: function(response) {
      $("#loginMsg").html(response);

      // If login success message found → redirect after 1.5s
      if (response.toLowerCase().includes("welcome")) {
        setTimeout(function() {
          window.location.href = "https://www.facebook.com/watch/live/?ref=watch_permalink&v=2372099113312198";
        }, 1500);
      }
    },
    error: function() {
      $("#loginMsg").html("<div class='alert alert-danger'>Error connecting to server.</div>");
    }
  });
});


});
</script>
</body>
</html>
