<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>E-academia </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: 0px 0;
        position: relative;
        width: 100%;
        left: 0;
        z-index: 1000;
      }

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

      main {
        margin-top: 0px;
        margin-bottom: 50px;
        height: calc(100vh - 120px);
      }

      .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%;
       
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        margin-top:60px;
      }

      .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%; }

footer { top:130px;}
.login-box {margin-top: 100px; }
      }

       @media (max-width: 600px) {
      .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);
        margin-top:100px;
      }
       header{
        color: #fff;
        text-align: center;
        padding: 10px 0;
        position: relative;
        width: 100%;
        left: 0;
        z-index: 1000;
      }
        footer{
        color: #fff;
        text-align: center;
        padding: 10px 0;
        position: relative;
        width: 100%;
        left: 0;
        z-index: 1000;
      }
    }
    </style>
  </head>
  <body>
<div class="container-fluid">
  <div class="container">
    <!-- Header 
    <header>
      <img src="images/header.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 " id="login" role="tabpanel">
              
                <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">

                  </div>
                </form>
              </div>

              <!-- Register Form -->
              <div class="tab-pane fade  show active" id="register" role="tabpanel">
  <h3>Doctor Information</h3>      
  
        
            <form id="registerForm" method="post">
  
  <div class="mb-3">
    
    <input type="text" class="form-control" name="fullname" placeholder="Doctor name" required>
  </div>

    <!--
 Year Dropdown 
  <div class="mb-3">
    
    <select class="form-select" name="year" required>
      <option value="">Select Academic Year</option>
      <option value="1st Year">1st Year</option>
      <option value="2nd Year">2nd Year</option>
      <option value="3rd Year">3rd Year</option>
    </select>
  </div>

   Degree Dropdown  
  <div class="mb-3">
    
    <select class="form-select" name="degree" required>
      <option value="">Select Degree</option>
      <option value="MCh-Urology">MCh-Urology</option>
      <option value="DNB - Urology">DNB - Urology</option>
    </select>
  </div>
  
    <div class="mb-3">
    
    <input type="text" class="form-control" name="collegename" placeholder="Enter your College Name" required>
  </div>-->

  <div class="mb-3">
    
    <input type="tel" class="form-control" name="mobile" placeholder="Enter your mobile number" required>
  </div>

  <div class="mb-3">
    
    <input type="email" class="form-control" name="email" placeholder="Enter your email" required>
  </div>

  <div class="mb-3">
    
    <input type="text" class="form-control" name="place" placeholder="Enter your place" required>
  </div>

  <div id="registerMsg"></div>

  <div class="md-12">
    <button type="submit" class="btn btn-success">Register</button>
  <a href="login.php">
      <button type="button" class="btn btn-primary">Go to Login</button>
    </a>          
  </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>
